'use client';

import { Image } from '@akinon/next/components';
import { useGetWidgetQuery } from '@akinon/next/data/client/misc';
import { useLocalization } from '@akinon/next/hooks/use-localization';
import { WidgetResultType } from '@akinon/next/types';
import { Icon, Link, LoaderSpinner } from '@theme/components';
import { formatDateToMonthYear } from '@theme/utils/formatDate';
import { useParams } from 'next/navigation';

interface BlogItemKwargs {
  url: string;
  data_type: string;
  value: string;
}

type blogItem = {
  value: string;
  kwargs: BlogItemKwargs;
};

type BlogType = {
  title: blogItem;
  link: blogItem;
  description: blogItem;
  image: blogItem;
  date: blogItem;
};

export default function Page() {
  const params = useParams<{ slug: string }>();
  const { locale, t } = useLocalization();
  const slug = params.slug;
  const { data, isLoading } = useGetWidgetQuery(slug) as ReturnType<
    typeof useGetWidgetQuery
  >;
  const blogData = data as WidgetResultType<BlogType> | undefined;

  if (isLoading) {
    return (
      <div className="py-20">
        <LoaderSpinner />
      </div>
    );
  }

  if (!blogData) {
    return (
      <div className="container mx-auto py-10">
        <p className="text-center py-20">{t('blog.blog_not_found')}</p>
        <Link
          className="text-sm text-[#121212] mt-20 mb-20 lg:mb-10 flex items-center justify-center"
          href="/blog"
        >
          <Icon name="arrow-left" size={16} className="mr-2" />
          <span className="hover:underline">{t('blog.back_to_blogs')}</span>
        </Link>
      </div>
    );
  }

  const formattedDate = formatDateToMonthYear(
    blogData?.attributes?.date?.value,
    locale as any
  );

  return (
    <div>
      <div className="container mx-auto py-1 lg:py-10 lg:px-4">
        <Image
          src={blogData?.attributes?.image?.kwargs?.url}
          alt={blogData?.attributes?.title?.value || 'Blog Image'}
          aspectRatio={1072 / 923}
          fill
          sizes="100vw"
          className="w-full h-auto mb-6 rounded-lg object-cover"
        />
        <div className="lg:max-w-[699px] lg:mx-auto px-3 lg:px-0">
          <h1 className="text-[40px] mb-2 lg:mb-4 text-[#121212]">
            {blogData?.attributes?.title?.value || 'Blog Title'}
          </h1>
          <span className="text-[13px] mb-5 lg:mb-12 block">
            {formattedDate}
          </span>

          <Link className=" mb-12 inline-flex items-center" href={'#'}>
            <Icon name="share" size={16} className="mr-2" />
            <span className="text-sm text-[#121212] hover:underline">
              {t('blog.share')}
            </span>
          </Link>

          <div
            className="prose max-w-none prose-headings:text-primary"
            dangerouslySetInnerHTML={{
              __html: blogData?.attributes?.description?.value || 'Blog Content'
            }}
          />

          {blogData?.attributes?.link?.value && (
            <Link
              className="text-sm text-[#121212] underline mt-6 inline-block"
              href={blogData?.attributes?.link?.value}
            >
              {t('blog.view_product')}
            </Link>
          )}
        </div>

        <Link
          className="text-sm text-[#121212] mt-20 mb-20 lg:mb-10 flex items-center justify-center"
          href="/blog"
        >
          <Icon name="arrow-left" size={16} className="mr-2" />
          <span className="hover:underline">{t('blog.back_to_blogs')}</span>
        </Link>
      </div>
    </div>
  );
}